<template>
  <div class="home">
    <div class="top">
      <van-search placeholder="请输入搜索关键词" />
    </div>

    <!-- 宫格 -->
    <div class="second">
      <van-grid :column-num="5" icon-size="50">
        <van-grid-item
          v-for="(item,index) in nav"
          :key="index"
          :icon="item.icon"
          :text="item.name"
          v-show="index<10"
          @click="go"
        />
      </van-grid>
    </div>

    <!-- 分割线 -->
    <div class="fenge">
      <van-divider>附近商家</van-divider>
    </div>

    <!-- 排序 -->
    <div class="paixu">
      <van-row>
        <van-col span="6">综合排序</van-col>
        <van-col span="6">销量最高</van-col>
        <van-col span="6">距离最近</van-col>
        <van-col span="6">筛选</van-col>
      </van-row>
    </div>

    <!-- 列表 -->
    <div class="third">
      <van-card
        v-for="(item,index) in list"
        :key="index"
        :title="item.shopName"
        :thumb="item.picUrl"
        @click="goDetails(item)"
      >
        <template #desc>
          <van-rate  :size="10" color="#ffd21e" void-icon="star" void-color="#eee" />
          <span>{{item.monthSalesTip}}</span> 
          <span>{{item.deliveryTimeTip}}</span>
          <span>{{item.distance}}</span>
        </template>
        <template #price>
          <span>{{item.minPriceTip}}</span> 
          <span>{{item.shippingFeeTip}}</span>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {
      nav: [],
      list: [],
    };
  },
  created() {
    this.$axios.get("http://localhost:8080/category.json").then((res) => {
      console.log(res.data.data.kingkongList);
      this.nav = res.data.data.kingkongList;
    });
    this.$axios.get("http://localhost:8080/listData.json").then((res) => {
      console.log(res.data.data.shopList);
      this.list = res.data.data.shopList;
    });
  },
  methods:{
    goDetails(item){
      this.$router.push({
        path:"/about",
        query:{
          id:item.mtWmPoiId
        }
      })
    },
    go(){//点击跳转
      this.$router.push({
        path:"/homeitem"
      })
    }
  }
};
</script>

<style scoped>
/* .top{
  width: 100%;
  height: 10vh;
  background: black;
} */

.paixu {
  width: 100%;
  height: 10vh;
  border-top: 0.5px solid lightgray;
  border-bottom: 0.5px solid lightgray;
  color: lightgray;
}
</style>
